<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block data-th-replace="/adminlte/base::base-head"></th:block>
	<link rel="stylesheet" href="/kaibes/vditor/index.min.css?v=3.8.4" />
</head>

<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">
		<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
		<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
		<div class="content-wrapper">
			<div class="content-header" th:with="currentName=${article!=null?'文章编辑':currentMenu.name}">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1 class="ml-2 text-dark">
								<th:block th:utext="${currentName}"></th:block>
								<a class="ml-2" target="_blank" th:if="${article!=null}"
									th:href="${'/article/'+article.id}" th:utext="${'/article/'+article.id}"></a>
								<a class="text-info" th:if="${article!=null}"
									th:utext="${'('+article.status.value+')'}"></a>
								<input id="article-status" th:if="${article!=null}"
									th:value="${article.status.toString()}" type="hidden">
							</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item" th:if="${currentMenu.parent != null}">
									<a href="#">
										<th:block th:utext="${currentMenu.parent.name}"></th:block>
									</a>
								</li>
								<li class="breadcrumb-item active" th:utext="${currentName}"> </li>
							</ol>
						</div>
					</div>
				</div>
			</div>
			<section class="content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-9">
							<div class="form-horizontal">
								<div class="form-group">
									<div class="col-sm-12">
										<input type="text" class="form-control input-lg" name="title"
											placeholder="请输入标题" id="article-title"
											th:value="${article!=null?article.title:''}">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-12">
										<input type="hidden" id="article-id" th:value="${article!=null?article.id:0}" />
										<input type="hidden" id="article-type" th:value="${article!=null?article.type:'POST'}" />
										<input type="hidden" id="article-old" th:value="${article!=null?article.content:''}" />
										<div id="vditor"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-3">
							<div class="card">
								<div class="card-body p-2">
									<button type="button" class="btn btn-primary btn-sm submitBtn"
										onclick="postArticle('PUBLISH')" th:if="${article==null}">发布帖子
									</button>
									<button type="button" class="btn btn-primary btn-sm submitBtn"
										onclick="putArticle('PUBLISH')" th:if="${article!=null}">保存帖子
									</button>

									<button type="button" class="btn btn-default btn-sm submitBtn"
										onclick="postArticle('DRAFT')" th:if="${article==null}"
										style="margin-left: 10px">保存草稿
									</button>
									<button type="button" class="btn btn-default btn-sm submitBtn"
										onclick="putArticle('DRAFT')" th:if="${article!=null}"
										style="margin-left: 10px">保存草稿
									</button>
								</div>
							</div>

							<div class="card collapsed-card">
								<div class="card-header">
									<h3 class="card-title">其他</h3>
									<div class="card-tools">
										<button type="button" class="btn btn-tool" data-card-widget="collapse">
											<i class="fas fa-plus"></i>
										</button>
									</div>
								</div>
								<ul class="card-body users-list pt-0 mt-0 pb-0" style="min-width: 220px;">
									<li class="list-inline" th:with="type=${article==null?'POST':article.type.name()}"
										style="text-align: left; width: 100%; min-width: 100px; padding-bottom: 0px;">
										<div class="form-check">
											<input type="checkbox" class="form-check-input" id="commentAble"
												name="commentAble"
												th:checked="${article==null?true:article.commentAble}">
											<label class="form-check-label" for="commentAble">允许评论</label>
										</div>
									</li>
									<li class="list-inline" th:with="type=${article==null?'POST':article.type.name()}"
										style="text-align: left; width: 100%; min-width: 100px; padding-bottom: 0px;">
										<div class="form-check">
											<input type="checkbox" class="form-check-input" id="top" name="top"
												th:checked="${article==null?false:article.top}">
											<label class="form-check-label" for="top">是否置顶</label>
										</div>
									</li>
								</ul>
							</div>

							<div class="card collapsed-card">
								<div class="card-header">
									<h3 class="card-title">类型</h3>
									<div class="card-tools">
										<button type="button" class="btn btn-tool" data-card-widget="collapse">
											<i class="fas fa-plus"></i>
										</button>
									</div>
								</div>
								<ul class="card-body users-list clearfix pt-0 mt-0 pb-0" style="min-width: 150px;"
									th:with="type=${article==null?'POST':article.type.name()}">
									<li style="text-align: left; width: 100%; min-width: 100px; padding-bottom: 0px;">
										<label class="mb-0">
											<input type="radio" name="type" value="POST"
												th:checked="${type.equals('POST')}">
											帖子
										</label>
									</li>
									<li style="text-align: left; width: 100%; min-width: 100px; padding-bottom: 0px;">
										<label class="mb-0">
											<input type="radio" name="type" value="PAGE"
												th:checked="${type.equals('PAGE')}">
											页面
										</label>
									</li>
								</ul>
							</div>

							<div class="card collapsed-card">
								<div class="card-header">
									<h3 class="card-title">分类</h3>
									<div class="card-tools">
										<button type="button" class="btn btn-tool" data-card-widget="collapse">
											<i class="fas fa-plus"></i>
										</button>
									</div>
								</div>
								<ul class="card-body users-list clearfix pt-0 mt-0 pb-0" style="min-width: 150px;">
									<li th:each="category:${categoryUtils.list()}"
										style="text-align: left; width: 100%; min-width: 100px; padding-bottom: 0px;">
										<label class="mb-0">
											<input type="radio" name="categoryId" th:value="${category.id}"
												th:attr="checked=${article==null?(categoryStat.index==0):(article.categoryId==category.id)}">
											<th:block th:utext="${category.name}"></th:block>
										</label>
									</li>
								</ul>
							</div>

							<div class="card collapsed-card">
								<div class="card-header">
									<h3 class="card-title">标签</h3>
									<div class="card-tools">
										<button type="button" class="btn btn-tool" data-card-widget="collapse">
											<i class="fas fa-plus"></i>
										</button>
									</div>
								</div>
								<div class="card-body">
									<a th:each="articleTag:${articleTagUtils.list()}" th:utext="${articleTag.name}"
										class="label label-info"
										style="display: inline-block; padding: 8px; margin: 5px;" href="#"
										onclick="setTag(this)">Default</a>
								</div>
								<div class="card-body pt-0">
									<textarea id="article-tags" class="form-control" name="tags"
										th:utext="${article!=null?article.tags:''}" rows="3"></textarea>
									<p class="help-block">多个标签请用分号（;）隔开。</p>
									<div class="tags"></div>
								</div>
							</div>

							<div class="card">
								<div class="card-header ">
									<h3 class="card-title">封面图</h3>
									<div class="card-tools">
										<button type="button" class="btn btn-tool" data-card-widget="collapse">
											<i class="fas fa-minus"></i>
										</button>
									</div>
								</div>
								<div class="card-body">
									<img th:src="${(article==null||StringUtils.isEmpty(article.thumbnail))?(''):(article.thumbnail)}" data-size="8"
										style="width: 100%; height: auto;" id="thumbnail">
									<p class="help-block pb-0 mb-0 mt-2">封面支持JPG/PNG/GIF格式，小于8MB</p>
                  					<input id="image" type="file" style="display: none;" accept=".jpg,.png,.gif" onchange="save2Id(this.files[0], 'thumbnail')" />
								</div>
								<div class="card-footer">
									<button type="button" class="jp-image-browser btn btn-primary btn-sm"
										data-dialog-t-title="设置封面" data-dialog-t-name="图片地址"
										data-dialog-p-input="请输入图片地址(http://)" data-dialog-prompt="thumbnail"
										onclick="dialog.input(this, setThumbnail)">设置封面</button>
									<button type="button" class="jp-image-browser btn btn-primary btn-sm"
										th:data-obj-thumbnail="${(article==null||StringUtils.isEmpty(article.thumbnail))?(''):(article.thumbnail)}"
										onclick="setThumbnail(this)">还原封面</button>
									<button type="button" class="jp-image-browser btn btn-primary btn-sm"
										onclick="removeThumbnail()">移除封面</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
		<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
		<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
	</div>
	
	<script src="/kaibes/vditor/index.min.js?v=3.8.4"></script>
	<script src="/kaibes/js/file.js"></script>
	<script src="article-vditor.js"></script>
	<script src="/admin/js/article-edit.js"></script>
	<script type="text/javascript">
		vditor.create('vditor', 1100, 100000);
		window.onload = function () {
			var content = $("#article-old").text();
			vditor.get.setValue(content);
		}
	</script>
</body>

</html>